M
MLOG
Lazy Loading di React: Code Splitting Komponen untuk Optimasi Kinerja | MLOG | MLOG ); } export default ImageGallery;

Dan komponen Image.js:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Dalam contoh ini, setiap gambar dibungkus dalam komponen <Suspense>, sehingga pesan pemuatan akan ditampilkan untuk setiap gambar saat sedang dimuat. Ini mencegah seluruh halaman terblokir saat gambar sedang diunduh.

Teknik Lanjutan dan Pertimbangan

1. Error Boundaries

Saat menggunakan lazy loading, penting untuk menangani potensi kesalahan yang mungkin terjadi selama proses pemuatan. Error boundaries dapat digunakan untuk menangkap kesalahan ini dan menampilkan UI fallback. Anda dapat membuat komponen error boundary seperti ini:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Perbarui state sehingga render berikutnya akan menampilkan UI fallback.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Anda juga dapat mencatat kesalahan ke layanan pelaporan kesalahan
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Anda dapat merender UI fallback kustom apa pun
      return 
Terjadi kesalahan.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Kemudian bungkus komponen <Suspense> dengan <ErrorBoundary>:



  Loading...}>

Jika terjadi kesalahan saat memuat MyComponent, <ErrorBoundary> akan menangkapnya dan menampilkan UI fallback.

2. Server-Side Rendering (SSR) dan Lazy Loading

Lazy loading juga dapat digunakan bersama dengan server-side rendering (SSR) untuk meningkatkan waktu muat awal aplikasi Anda. Namun, ini memerlukan beberapa konfigurasi tambahan. Anda harus memastikan bahwa server dapat menangani impor dinamis dengan benar dan bahwa komponen yang di-lazy load dihidrasi dengan benar di sisi klien.

Alat seperti Next.js dan Gatsby.js menyediakan dukungan bawaan untuk lazy loading dan code splitting di lingkungan SSR, membuat prosesnya jauh lebih mudah.

3. Pramuat (Preloading) Komponen yang Di-Lazy Load

Dalam beberapa kasus, Anda mungkin ingin melakukan pramuat (preload) pada komponen yang di-lazy load sebelum benar-benar dibutuhkan. Ini bisa berguna untuk komponen yang kemungkinan akan segera dirender, seperti komponen yang terletak di bawah lipatan halaman tetapi kemungkinan akan digulir ke dalam tampilan. Anda dapat melakukan pramuat komponen dengan memanggil fungsi import() secara manual:


import('./MyComponent'); // Pramuat MyComponent

Ini akan mulai memuat komponen di latar belakang, sehingga akan tersedia lebih cepat saat benar-benar dirender.

4. Impor Dinamis dengan Komentar Ajaib (Magic Comments) Webpack

"Komentar ajaib" Webpack menyediakan cara untuk menyesuaikan nama dari potongan kode yang dihasilkan. Ini dapat membantu untuk debugging dan menganalisis struktur bundle aplikasi Anda. Sebagai contoh:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Ini akan membuat potongan kode bernama "my-component.js" (atau yang serupa) alih-alih nama generik.

5. Menghindari Kesalahan Umum

Contoh Dunia Nyata dan Kasus Penggunaan

Lazy loading dapat diterapkan pada berbagai skenario untuk meningkatkan kinerja aplikasi React. Berikut beberapa contohnya:

Contoh: Situs Web E-commerce Internasional

Bayangkan sebuah situs web e-commerce yang menjual produk secara global. Negara yang berbeda mungkin memiliki mata uang, bahasa, dan katalog produk yang berbeda. Alih-alih memuat semua data untuk setiap negara di awal, Anda dapat menggunakan lazy loading untuk memuat data yang spesifik untuk lokasi pengguna hanya ketika mereka mengunjungi situs tersebut.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Fungsi untuk menentukan negara pengguna

  return (
    Memuat konten untuk wilayah Anda...}>
      
      
    
  );
}

Kesimpulan

Lazy loading dan code splitting komponen adalah teknik yang ampuh untuk mengoptimalkan kinerja aplikasi React. Dengan memuat komponen hanya saat dibutuhkan, Anda dapat secara signifikan mengurangi waktu muat awal, meningkatkan pengalaman pengguna, dan memperkuat SEO Anda. Komponen bawaan React, React.lazy() dan <Suspense>, memudahkan penerapan lazy loading dalam proyek Anda. Terapkan teknik ini untuk membangun aplikasi web yang lebih cepat, lebih responsif, dan lebih menarik bagi audiens global.

Ingatlah untuk selalu mempertimbangkan pengalaman pengguna saat menerapkan lazy loading. Sediakan UI fallback yang informatif, tangani potensi kesalahan dengan baik, dan analisis kinerja aplikasi Anda dengan cermat untuk memastikan Anda mencapai hasil yang diinginkan. Jangan takut untuk bereksperimen dengan berbagai pendekatan dan temukan solusi terbaik untuk kebutuhan spesifik Anda.